import React from 'react'
import {WeaTools} from "ecCom";
import './style'

export default class ContainerViewExtend extends React.Component{

    componentDidUpdate(){
        const {viewExtend} = this.refs
        $(viewExtend).find(".row .col .name").css('width','')
        let namesDom = $(viewExtend).find(".row .col .name")
        let maxWidth = 0
        for(let i = 0; i< namesDom.length ;i++){
            if($(namesDom[i]).width() > maxWidth){
                maxWidth = $(namesDom[i]).width()
            }
        }
        if(maxWidth != 0){
            $(viewExtend).find(".row .col .name").width(maxWidth+1)
        }
    }

    render(){

        const defaultImg = '/spa/portal/images/quickentry/default.png'
        const {viewExtend} = this.refs
        const {data,tabId} = this.props
        let {id,setting,items}  = data
        let {showType,containerWidth=100,containerHeight=150,windowWidth,iconWidth='75',iconHeight='75',rowSpace='10',iconNameSpace='10',horizontalAlign,fontColor,titleIsAutoEnter='0'} = setting
        let {showNumberForRow} = setting

        //上下布局（0）、左右布局（1）
        let layout
        //是否有背景色
        let hasBgc
        //是否有分割线
        let hasSplitLine
        if(showType == 0){
            layout = 0
            hasBgc = false
            hasSplitLine = false
        }else if(showType == 1){
            layout = 0
            hasBgc = false
            hasSplitLine = true
        }else if(showType == 2){
            layout = 0
            hasBgc = true
            hasSplitLine = false

        }else if(showType == 3){
            layout = 1
            hasBgc = false
            hasSplitLine = false
        }else if(showType == 4){
            layout = 1
            hasBgc = false
            hasSplitLine = true
        }else if(showType == 5){
            layout = 1
            hasBgc = true
            hasSplitLine = false
        }else if(showType == 6){
            layout = 0
            hasBgc = false
            hasSplitLine = false
        }

        if(showNumberForRow == 0 && viewExtend){
            if(layout == 0){
                showNumberForRow = parseInt($(viewExtend).width()/75);
            }else if(layout == 1){
                showNumberForRow = parseInt($(viewExtend).width()/220);
            }
        }

        let content = null

        items = items.filter(function(item){
            return item.setting.isShow == 1
        })
        const splitRowItems = []
        let tempItems = []
        for(let i= 0 ; i< items.length ;i++){
            if(i%showNumberForRow == 0){
                tempItems = []
                splitRowItems.push(tempItems)
            }
            tempItems.push(items[i])
        }

        if(items.length > 0){
            if(showType == 6){
                if(window.outerWidth != windowWidth){
                    let _containerWidth
                    let _containerHeight
                    _containerWidth = (window.outerWidth/windowWidth)*containerWidth
                    _containerHeight = (containerHeight/containerWidth)*_containerWidth
                    containerWidth = _containerWidth
                    containerHeight = _containerHeight
                }
            }

            content = (
                <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@slpm7x`}>
                    {
                        splitRowItems.map((item,index)=>{
                            return (
                                <div className="row" style={{'text-align':horizontalAlign == 0 ? 'left':'center','border-bottom':(hasSplitLine && index != splitRowItems.length-1) ?'1px dashed #989a9c':((hasBgc && index != splitRowItems.length-1) ?'5px solid transparent':'none'),'margin-top':(showType == 6 && index != 0) ? rowSpace+'px' :'0px'}}>
                                    {
                                        item.map((item2,index2)=>{
                                            let colStyle = {
                                                width: 100/showNumberForRow +'%',
                                            }
                                            if(showType == 6){

                                                colStyle.width = containerWidth +'px'
                                                colStyle.height = containerHeight +'px'
                                                colStyle.border = '2px dotted #eccccc'
                                                colStyle['border-radius'] = '4px'
                                            }
                                            let colContentStyle = {
                                            }
                                            if(showType == 6){
                                                colContentStyle.padding = '0px'
                                            }
                                            let colImgStyle = {}
                                            let colImgImgStyle = {
                                                width: iconWidth+'px',
                                                height: iconHeight+'px'
                                            }
                                            let colNameStyle = {
                                                color:fontColor
                                            }
                                            let colNameContentStyle = {
                                                'word-break' : 'break-all'
                                            }


                                            if(layout == 0){
                                                colNameStyle.margin = '0px 7.5%'
                                                colNameStyle['text-align'] = 'center'
                                                colNameStyle['margin-top'] = '10px'
                                            }else if(layout == 1){
                                                colImgStyle.display = 'inline-block'
                                                colImgStyle['vertical-align'] = 'middle'

                                                colNameStyle.display = 'inline-block'
                                                colNameStyle['max-width'] = `calc(100% - 20px - ${iconWidth}px)`
                                                colNameStyle['padding-left'] = '20px'
                                                colNameStyle['text-align'] = 'left'
                                                colNameStyle['vertical-align'] = 'middle'

                                            }

                                            if(showType == 6){
                                                colNameStyle['margin-top'] = iconNameSpace +'px'
                                                colNameStyle.height = 'auto'
                                            }

                                            if(hasSplitLine){
                                                if(index2 != item.length-1){
                                                    colStyle['border-right'] = '1px dashed #989a9c'
                                                }else if(index2 == item.length-1){
                                                    colStyle['border-right'] = 'none'
                                                }
                                            }
                                            if(hasBgc){
                                                // colStyle['background-color'] = item2.setting.bgc
                                                if(index2 != item.length-1){
                                                    colStyle['border-right'] = '5px solid transparent'
                                                }else if(index2 == item.length-1 && index2 != showNumberForRow-1){
                                                    colStyle.width = `calc(${100/showNumberForRow}% - 5px)`
                                                    colStyle['margin-right'] = '5px'
                                                }
                                            }

                                            if(titleIsAutoEnter == '0'){
                                                colNameContentStyle['white-space'] = 'nowrap'
                                                colNameContentStyle.overflow = 'hidden'
                                                colNameContentStyle['text-overflow'] = 'ellipsis'
                                            }else{
                                                colNameContentStyle.display = '-webkit-box'
                                                colNameContentStyle['-webkit-box-orient'] = 'vertical'
                                                colNameContentStyle['-webkit-line-clamp'] = '2'
                                                colNameContentStyle.overflow = 'hidden'

                                            }

                                            return (

                                                <div className="col" style={{...colStyle,'margin-left' : (showType == 6 && index2 != 0) ?  `calc((100% - ${containerWidth*showNumberForRow}px) / ${showNumberForRow-1})` : '0px'}} onClick={()=>{this.handerItemOnClick(item2.setting.url)}} title={item2.setting.title}>
                                                    <div className="col-content" style={{...colContentStyle,'background-color':hasBgc ? item2.setting.bgc: 'transparent'}}>
                                                        <div className="img" style={colImgStyle}><img style={colImgImgStyle} src={item2.setting.img && item2.setting.img != ''? item2.setting.img : defaultImg }/></div>

                                                        <div className="name" style={{...colNameStyle}}>
                                                            <div className="name-content">
                                                                <div style={colNameContentStyle}>{item2.setting.title}</div>
                                                            </div>
                                                            <div className='middleUtil'></div>
                                                        </div>
                                                    </div>
                                                    <div className='middleUtil'></div>
                                                </div>

                                            )
                                        })
                                    }

                                </div>
                            )
                        })
                    }
                </React.Fragment>
            )
        }

        return (
            <div className="quickEnter-viewExtend">
                <div ref="viewExtend">
                    {content}
                </div>
            </div>
        )
    }

    handerItemOnClick = (url)=>{
        const {data} = this.props
        const {setting}  = data
        const {linkType} = setting
        if(url){
            if(linkType == 0){
                location.href = url
            }else if(linkType == 1) {
                window.open(url,'_blank')
            }
        }
    }
}